
<template>
  <div class="app">
    <h2>Vue导航测试</h2>
    <!-- 导航区 -->
     <div class="nav">
      <RouterLink :to="`/home`" active-class="jihuo">首页</RouterLink>
      <RouterLink replace :to="{name: 'xinwen'}"  active-class="jihuo">新闻</RouterLink>
      <RouterLink replace :to="{path: '/about'}"  active-class="jihuo">关于</RouterLink>
     </div>
    <!-- 展示区 -->
     <div class="main-content">
      <RouterView></RouterView>
     </div>
  </div>
</template>

<script setup lang="ts">
import {RouterView, RouterLink} from 'vue-router'
</script>


<style scoped>
.app a {
  text-decoration: none;
  padding: 20px;
}
.main-content {
  border: 2px solid #ccc;
}
.jihuo{
  color: red;
  font-weight: bold;
}
</style>
